<template>
    <div class="checkbox-box">
    <el-checkbox v-if="checkAll" :disabled="disabled" v-model="isAll" label="_all" @change="checkAllHandle">全选</el-checkbox>
    <el-checkbox-group :disabled="disabled" v-model="model" :class="{'checkbox-box-group' : checkAll}" @change="handleChange"> 
        <el-checkbox v-for="(item,index) in codeData" :label="item.value" :key="index">{{item.text}}</el-checkbox>
    </el-checkbox-group>
    </div>
</template>
<script>
import {codeProvider} from '../../../assets/js/provider.js'
export default {
    name: 'dx-checkbox',
    props:{
        value : {type: null ,default:()=>{return [];}},
        codeType : {type:String,default:''},
        checkAll : {type:Boolean ,default:false},
        condition : {type:Object,default:()=>{}},
        disabled : {type:Boolean ,default:false}
    },
    data(){
        return {
            val : this.value,
            isAll : [],
            codeData : []
        }
    },
    watch : {

        codeType(val){
            this.initData();
        },
        condition(val){
            this.initData();
        }
    },
    computed : {
        model : {
            get(){
                if(this.val.length == this.codeData.length){
                    this.isAll = ['_all'];
                }else{
                    this.isAll = [];
                }
                this.val = this.value;
                // console.log('this.value',this.value);
                return this.val && this.val.length > 0 ? this.val : this.value;
            },
            set(value){
                this.val = value;
                if(this.val.length==this.codeData.length){
                    this.isAll = ['_all'];
                }else{
                    this.isAll = [];

                }
                this.$emit('input', value); // key code 
            }
        }
    },
    methods : {
        handleChange(val){
            if(val.length == this.codeData.length){
                    this.isAll = ['_all'];
            }else{
                this.isAll = [];
            }
            this.$emit('change',val);
        },
        checkAllHandle(value){
            this.val = []
            if(value){
                this.val = [];
                this.codeData.forEach(element => {
                    this.val.push(element.value);
                });
            }
        },
        initData(){
            if(this.codeType){
                codeProvider.getList(this.codeType,this.condition||{}).then(resp=>{
                    this.codeData = resp;
                    if(this.val.length == this.codeData.length){
                        this.isAll = ['_all'];
                    }else{
                        this.isAll = [];
                    }
                });
            }else{
                console.error('codeType is not empty!');
            }
        }
    },
    created(){
        this.initData();
    },
    mounted(){

    }
}
</script>
<style scoped>
.checkbox-box{
    display: inline;
}
.checkbox-box-group{
    display: inline;
    margin-left: 30px;
}
</style>
